<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂情况的使用</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 500px;
            height: 400px;
            border: 10px solid black;
            margin: 20px;
            padding: 20px;
            background-size: cover;
            /* 背景图层 */
            /* 背景区域默认从左上角padding区域进行蔓延，蔓延置border下方 */
            /* background-image: url(../../img/OIP-C\ \(3\).jpg);
            background-repeat: no-repeat; */

            /* 修改背景图层填充的源点 */
            /* 
                1.padding-box 默认值 从padding区域开始蔓延
                2.content-box 从内容区域开始蔓延
                3.border-box 从边框区域开始蔓延
            */
            /* background-origin: content-box; */

            /* 背景裁剪 */
            /* 
                将超出某个区域的背景图裁剪隐藏
                可选择与origin一致
            */
            /* background-clip: content-box; */

            /* 背景图片的复合写法
                background: color url() repeat position/size;
            */
            background: aqua url(../../img/OIP-C\ \(2\).jpg) no-repeat center/200px;
            /* 
                若是多张背景图进行设置，需要注意：
                设置背景颜色是将其写在最后面即可，逗号隔开
            */
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>